<template>
	<view class="container">
		<!-- 顶部导航 -->
		<navgats :images="images"></navgats>

		<!-- 横向滚动选项卡 -->
		<view class="tab-container">
			<scroll-view class="tab-scroll" scroll-x="true" show-scrollbar="false" :scroll-with-animation="true">
				<view class="tab-list">
					<view class="tab-item" v-for="(item, index) in boxList" :key="index"
						:class="{ 'active': currentTab === index }" @click="switchTab(index)" :style="{ 
              'background-image': currentTab === index ? activeTabBg : inactiveTabBg,
              'background-size': '100% 100%',
              'background-position': 'center',
              'background-repeat': 'no-repeat'
            }">
						<text class="tab-text">{{ item.name }}</text>
					</view>
				</view>
			</scroll-view>
		</view>

		<!-- 当前选中的盲盒内容 -->
		<view class="box-content" v-if="boxList.length > 0 && boxList[currentTab].box">
			<view class="box-grid">
				<view class="box-item" v-for="(items, indexs) in boxList[currentTab].box" :key="indexs"
					@click="goBoxDetail(items.id)">
					<view class="box-cover">
						<image :src="items.cover || 'https://img.jingkakeji.com/img/static/mangbox/111.png'"
							mode="aspectFill" class="box-img">
						</image>
					</view>
					<view class="box-info">
						<text class="box-name">{{ items.name }}</text>
						<view class="box-price">
							<view class="price-icon">

							</view>

							<text class="price-text"> {{ items.bean || '0' }}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 数据加载提示 -->
		<view class="empty-state" v-if="boxList.length === 0">
			<text>加载中...</text>
		</view>

		<view class="empty-state"
			v-if="boxList.length > 0 && (!boxList[currentTab].box || boxList[currentTab].box.length === 0)">
			<text>暂无数据</text>
		</view>
	</view>
</template>

<script>
	import {
		getBoxList
	} from "../../api/outOfTheFree/index.js"
	import navgats from "../../Component/navgatsmy/navgatsmy.vue"
	import {
		playSound
	} from "../../utils/soundSettings.js"

	export default {
		components: {
			navgats
		},
		data() {
			return {
				images: "https://img.jingkakeji.com/img/static/boxmang.png",
				userBalance: 1000,
				boxList: [],
				currentTab: 0,
				// 选项卡背景图，替换为您的实际图片路径
				activeTabBg: 'url(https://img.jingkakeji.com/img/static/new_mangbox/active.png)',
				inactiveTabBg: 'url(https://img.jingkakeji.com/img/static/new_mangbox/no_active.png)'
			}
		},
		onShow() {
			this.onboxs()
		},
		methods: {
			async onboxs() {
				try {
					let res = await getBoxList()
					console.log('盲盒数据:', res)

					// 确保数据格式正确
					if (res && res.data && Array.isArray(res.data)) {
						this.boxList = res.data
						console.log(this.boxList, 'boxList')
						// 如果有数据，默认选中第一个
						if (this.boxList.length > 0) {
							this.currentTab = 0
						}
					} else {
						console.log(res)
						console.error('接口返回数据格式不正确')
						// 测试数据，实际使用时可以删除
						this.boxList = [

						]
					}
				} catch (error) {
					console.error('获取盲盒数据失败:', error)
				}
			},
			goBoxDetail(id) {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				if (id) {
					uni.navigateTo({
						url: `/pages/mangbox/xqsing/xqsing?id=${id}`
					})
				}
			},
			switchTab(index) {
				playSound("https://img.jingkakeji.com/img/static/music/click.mp3")
				console.log('切换到选项卡:', index)
				this.currentTab = index
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: url("https://img.jingkakeji.com/img/static/huabanone.png");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		margin: 0;
		height: calc(100% - 100rpx);
	}

	.container {
		height: calc(100% - 100rpx);
	}

	/* 选项卡样式 */
	.tab-container {
		height: 150rpx;
		padding: 15rpx 20rpx;
		box-sizing: border-box;
		margin-top: 10rpx;
	}

	.tab-scroll {
		width: 100%;
		white-space: nowrap;
		box-sizing: border-box;
	}

	.tab-list {
		height: 90rpx;
		display: inline-flex;
		padding: 5rpx 0;
	}

	.tab-item {
		width: 168rpx;
		height: 100%;
		margin-right: 15rpx;
		color: #fff;
		font-size: 28rpx;
		white-space: nowrap;
		transition: all 0.3s ease;
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		background-image: url("https://img.jingkakeji.com/img/static/new_mangbox/no_active.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;


	}

	.tab-item.active {
		transform: scale(1.05);
		font-weight: bold;
		background-image: url("https://img.jingkakeji.com/img/static/new_mangbox/no_active.png");
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}

	.tab-text {
		position: relative;
		z-index: 1;
	}

	/* 盲盒内容样式 */
	.box-content {
		padding: 20rpx;
	}

	.section-title {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.title-icon {
			width: 40rpx;
			height: 40rpx;
			margin-right: 10rpx;
		}

		.title-text {
			font-size: 32rpx;
			font-weight: bold;
			background-image: -webkit-linear-gradient(bottom, red, #fd8403, yellow);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
		}
	}

	/* 三列网格布局 */
	.box-grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20rpx;
	}

	.box-item {
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
		display: flex;
		flex-direction: column;
		aspect-ratio: 3/4;
		/* 保持宽高比 */
	}

	.box-cover {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 20rpx;
		background-image: url("https://img.jingkakeji.com/img/static/new_mangbox/img.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
	}

	.box-img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.box-info {
		padding: 15rpx;
		background: url("https://img.jingkakeji.com/img/static/new_mangbox/text.png");
		background-repeat: no-repeat;
		background-position: center;
		background-size: 100% 100%;
		text-align: center;

		.box-name {
			font-size: 28rpx;
			color: #ffffff;
			display: block;
			margin-bottom: 10rpx;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.box-price {
			display: flex;
			align-items: center;
			justify-content: center;

			.price-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
				background-image: url("https://img.jingkakeji.com/img/static/lucky/mony.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}

			.price-text {
				font-size: 26rpx;
				color: #ff5e00;
				font-weight: bold;
			}
		}
	}

	/* 空状态样式 */
	.empty-state {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 100rpx 0;
		color: #999;
		font-size: 28rpx;
	}

	/* 底部导航样式 */
	.tabbar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: space-around;
		align-items: center;
		height: 100rpx;
		background-color: #1a1a1a;
		z-index: 100;

		.tabbar-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;

			&.active {
				.tabbar-text {
					color: #ff5e00;
				}
			}

			.tabbar-icon {
				width: 44rpx;
				height: 44rpx;
				margin-bottom: 4rpx;
			}

			.tabbar-text {
				font-size: 22rpx;
				color: #999;
			}
		}
	}
</style>